<template>
<div class="brand-main">
    <el-card class="brand-header">
        <div slot="header" class="header">查询</div>
        <div>
            <el-row :gutter="2">
                <el-col :span="12">
                    <el-input v-model="search.name" placeholder="请输入商品品牌名称" id="brandname"></el-input>
                </el-col>
            </el-row>
        </div>
    </el-card>


    <el-card class="brand">
        <div slot="header" class="clearfix header">
            <el-button type="primary" @click="addBrand">新增</el-button>
        </div>
        <div>
            <el-table :data="newBrandList" style="width: 100%" border v-loading="loading"  element-loading-text="拼命加载中……">

                <el-table-column type="index" width="50" label="序号">
                </el-table-column>
                <el-table-column prop="name" label="商品名称" width="90">
                </el-table-column>
                <el-table-column header-align="center" align="center" label="品牌图片" width="130">
                    <template slot-scope="scope">
                        <img :src="scope.row.bigPic" alt="sorry">
                    </template>
                </el-table-column>
                 <el-table-column header-align="center" align="center" label="品牌图片" width="130">
                    <template slot-scope="scope">
                        <img :src="scope.row.logo" alt="sorry">
                    </template>
                </el-table-column>
                <el-table-column header-align="center" align="center" prop="brandStory" label="品牌故事" width="120" class="brandStory">
                </el-table-column>
                <el-table-column header-align="center" align="center" prop="productCommentCount" label="商品评论">
                </el-table-column>
                <el-table-column header-align="center" align="center" prop="productCount" label="产品数量">
                </el-table-column>
                <el-table-column
                    header-align="center"
                    align="center"
                    label="是否显示" >
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.showStatus" :active-value="1" :inactive-value="0" @change="changeNewStatus(scope.row.showStatus,scope.row.id)"></el-switch>
                    </template>
                </el-table-column>
                  <el-table-column
                    header-align="center"
                    align="center"
                    label="是否品牌">
                    <template slot-scope="scope">
                        <el-switch v-model="scope.row.factoryStatus" :active-value="1" :inactive-value="0"></el-switch>
                    </template>
                </el-table-column>

                <el-table-column header-align="center" align="center" label="操作" width="120">
                    <template slot-scope="scope">
                        <el-button type="primary" icon="el-icon-edit" circle @click="goEditBrand(scope.row)"></el-button>
                        <el-button type="danger" icon="el-icon-delete" circle @click="goDelBrand(scope.row.id)"></el-button>
                    </template>
                </el-table-column>

            </el-table>
            <!-- 分页器 -->
            <el-pagination class="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.start" :page-sizes="page.sizes" :page-size="page.limit" layout="total, sizes, prev, pager, next, jumper" :total="page.totalCount" style="margin-top:20px;">
        </el-pagination>

        </div>
    </el-card>

</div>
</template>

<script>
import {
    findAllBrand,
    delBrand,
    switchShowStatus,findBrandByPage
} from '@/api/product/brand/index'

export default {
    name: 'BrandList',
    components: {

    },
    data() {
        return {
            brandList: [],
            // 分页器内容
            page: {
                limit: 5, //每一页数量
                sizes: [5, 10, 15, 20],
                totalCount: 20, //总页数
                start: 1 //当前页码
            },
            search:{},
            loading:true
        };
    },
    computed: {
        newBrandList(){
            if(this.search.name){
                return this.brandList.filter(el=>el.name.includes(this.search.name))
            }else{
                return this.brandList
            }
        }


    },
    created() {
        this.init()
        // this.find()

    },
    mounted() {

    },
    methods: {
        init() {
             
            findAllBrand().then(res => {
                if (res.success) {
                    this.loading=false
                    this.brandList = res.data.items
                    this.page.totalCount=res.data.items.length
                }else{
                     this.$message.error('请求错误！！！')
                }
            })
        },
        goDelBrand(id) {
            console.log(id);
            this.$confirm('此操作将永久删除该文章, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                delBrand(id).then(res => {
                    console.log(res)
                    if (res.success) {
                        this.init()
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    }else{
                     this.$message.error('删除失败！！！')
                    }
                })

            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        },
        // 编辑商品品牌
        goEditBrand(row) {
            this.$router.push({
                name: 'productListBrandEdit',
                query: {
                    brand: row
                }
            })

        },
        addBrand() {
            this.$router.push({
                name: 'productListBrandEdit'
            })
        },
        changeNewStatus(status,id){
            let data={id,status}
            switchShowStatus(data).then(res=>{
                if(res.success){
                    this.$message.success('修改是否显示成功')
                }else{
                    this.$message.error('修改失败!!!')
                }
            })

        },
        searchBrand(){
        //   var res=  this.brandList.filter(el=>el.name.includes(this.search.name))
        //   console.log(res);
        },
        //   // 分页器
        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.page.limit = val
            this.find()
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            // 修改当前页
            this.page.start = val
            this.find()
        },
        find(){
          findBrandByPage(this.page.start,this.page.limit).then(res=>{
                 if(res.success){
                     this.loading=false
                     this.newBrandList=res.data.rows
                     this.page.totalCount=res.data.total
                 }else{
                     this.$message.error('请求错误！！！')
                 }
            })
        }

    },
};
</script>

<style lang="scss" scoped>
 .brand-header{
    margin: 30px;
    .header{
           font-weight: bolder;
                color:#26A65B;
                font-size: 22px;
    }

    }
.brand {
    margin: 30px;
   
   img{
       width: 120px;
       height: 120px;
   }
   .brandStory{
       white-space: nowrap;
       text-overflow: ellipsis;
       overflow: hidden;
   }
            


}
</style>
